<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>CSS3 の display:box; を使ったフレキシブルな段組みレイアウト</title>
        
        <meta name="viewport" content="initial-scale=0.55" />
        
        <style>
        * {
            margin: 0px;
            padding: 0px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            
            font-family: "Meiryo", Arial, Helvetica, sans-serif;
        }
        
        body {
            padding: 20px;
        }
        
        h1 {
            text-shadow: 2px 2px 2px #aaa;
        }
        
        #main>h1 {
            border-left: 15px solid black;
            margin-bottom: 20px;
        }
        
        #main>section>h1 {
            margin: 10px -10px 10px;
        }
        #main>section>h1:before { content: "【"; }
        #main>section>h1:after  { content: "】"; }
        #main>section>p {margin: 5px;}
        
        #wrap {
            margin: 20px;
            padding: 20px;
            background-color: rgb(240, 250, 255);
            box-shadow: 0px 0px 8px 0px rgb(200, 200, 255);
        }
        
        #main {}
        #main section {
            margin-bottom: 40px;
        }
        
        .fix-wrap {
            padding: 10px;
            width: 1200px;
            background-color: white;
            border: 1px solid #aaa;
        }
        
        .liquid-wrap {
            padding: 10px;
            width: 100%;
            background-color: white;
            border: 1px solid #aaa;
        }
        
        .box {
            margin: 5px;
            width: 200px;
            height: 100px;
            border-radius: 5px;
            box-shadow: 0px 0px 12px 0px black;
            
            font-size: 25px;
            text-shadow: 2px 2px 2px black;
            color: white;
            text-align: center;
            line-height: 100px;
        }
        
        .main {
            width: 400px;
            background-color: hsl(0, 50%, 50%);
        }
        .sub00 {
            background-color: hsl(120, 50%, 50%);
        }
        
        .sub01 {
            background-color: hsl(240, 50%, 50%);
        }
        
        
        /**
         *     それぞれ指定
         */
        #sample00 .fix-wrap {

        }
        
        
        
        
        /**
         *     
         */
        #sample01 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
        }
        
        
        
        
        
        
        
        
        /**
         *     
         */
        #sample02 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
            
            margin: 0px auto;
        }
        
        
        
        
        
        
        
        /**
         *     
         */
        #sample03>div {
            margin: 0px auto;
            width: 1200px;
        }
        #sample03 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
        }
        
        
        
        
        
        
        
        /**
         *     
         */
        #sample04 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
        }
        
        
        
        
        
        
        /**
         *     
         */
        #sample05 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
            -webkit-box-pack: start;
            -moz-box-pack: start;
            box-pack: start;
        }
        
        
        
        
        
        
        /**
         *     
         */
        #sample06 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
            -webkit-box-pack: end;
            -moz-box-pack: end;
            box-pack: end;
        }
        
        
        
        
        
        
        /**
         *     
         */
        #sample07 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
        }
        #sample07 .main {
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -o-box-ordinal-group: 2;
            box-ordinal-group: 2;
        }
        #sample07 .sub00 {
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -o-box-ordinal-group: 1;
            box-ordinal-group: 1;
        }
        #sample07 .sub01 {
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -o-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        
        
        
        
        
        
        
        /**
         *     
         */
        #sample08 .fix-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
        }
        #sample08 .main {
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -o-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #sample08 .sub00 {
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -o-box-ordinal-group: 2;
            box-ordinal-group: 2;
        }
        #sample08 .sub01 {
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -o-box-ordinal-group: 1;
            box-ordinal-group: 1;
        }
        
        
        
        
        
        
        
        
        
        /**
         *     
         */
        #sample09 .liquid-wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            display: box;
        }
        #sample09 .main {
            -webkit-box-flex: 1.0;
            -moz-box-flex: 1.0;
            box-flex: 1.0;
        }
        
        </style>
        
        <script>
        /* ここに JavaScript を書く */
        </script>
    </head>
    
    <body>
        <header>
            <h1>CSS3 の display:box; を使ったフレキシブルな段組みレイアウト</h1>
        </header>
        
        <div id="wrap">
            <section id="main">
                <h1>サンプル</h1>
                <section id="sample00">
                    <h1>普通に表示</h1>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                
                <section id="sample01">
                    <h1>display:box; を指定して横並び</h1>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                
                <section id="sample02">
                    <h1>全体を中央揃え</h1>
                    <p>
                        margin: 0px auto; によるセンタリング. FireFox だと何故かセンタリングされません.
                        どうやらdisplay:box; が指定してあると効かなくなるようです.
                    </p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                
                <section id="sample03">
                    <h1>全体を中央揃え(FireFox対策)</h1>
                    <p>センタリング用の要素で囲うしかないようです...</p>
                    <div>
                        <div class="fix-wrap">
                            <div class="box main">Main</div>
                            <div class="box sub00">Sub00</div>
                            <div class="box sub01">Sub01</div>
                        </div>
                    </div>
                </section>
                
                <section id="sample04">
                    <h1>中身を中央揃え</h1>
                    <p>box-pack: center; で中身が良い感じに中央に寄ってくれます</p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                <section id="sample05">
                    <h1>中身を左寄せ</h1>
                    <p>box-pack: start; で左寄せ</p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                <section id="sample06">
                    <h1>中身を右寄せ</h1>
                    <p>box-pack: end; で右寄せ</p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                <section id="sample07">
                    <h1>並び替え part1</h1>
                    <p>display:box; を指定している要素の子供に, box-oridinal-group: index; 指定で順番を並び替えることができます.</p>
                    <p>Sub00 - Main - Sub01</p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                <section id="sample08">
                    <h1>並び替え part2</h1>
                    <p>Sub01 - Sub00 - Main</p>
                    <div class="fix-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                
                <section id="sample09">
                    <h1>リキッドデザイン</h1>
                    <p>Main ボックスがウィンドウ幅に合わせて可変します.</p>
                    <p>box-flex: 数値(float); で可変長指定できます.</p>
                    <p>今回は main ボックスのみに指定しているので main だけがウィンドウ幅に合わせて伸び縮みします.</p>
                    <div class="liquid-wrap">
                        <div class="box main">Main</div>
                        <div class="box sub00">Sub00</div>
                        <div class="box sub01">Sub01</div>
                    </div>
                </section>
                
            </section>
        </div>
        
        <footer>
            <p style="text-align: center; padding-bottom:800px;"><a href="http://tmlife.net">Home</a></p>
        </footer>
        
    </body>
</html>
